<template>
  <div class="manage_message_content">
    <div class="manage_message_content_row">
      <div class="manage_message_content_label">
        道具类型
      </div>
      <div class="manage_message_content_body">
        {{ detail.propType === 1 ? "广告样式" : "抵扣券" }}
      </div>
    </div>
    <div class="manage_message_content_row">
      <div class="manage_message_content_label">
        道具名称
      </div>
      <div class="manage_message_content_body">
        {{ detail.propName }}
      </div>
    </div>
    <div class="manage_message_content_row" v-if="detail.propType === 2">
      <div class="manage_message_content_label">
        可抵扣金额
      </div>
      <div class="manage_message_content_body">
        {{ detail.deductionAmount }}元
      </div>
    </div>
    <div class="manage_message_content_row">
      <div class="manage_message_content_label">
        道具展示
      </div>
      <div class="manage_message_content_body">
        <div v-if="detail.propType === 1" class="manage_message_prop">
          <div class="manage_message_prop_item">
            <div class="manage_prop_item_title">
              后台展示图
            </div>
            <div class="manage_prop_item_content">
              <span
                class="img_box"
                :style="`background-image:url(${detail.showEffectPic})`"
              ></span>
            </div>
          </div>
          <div class="manage_message_prop_item">
            <div class="manage_prop_item_title">
              APP展示图
            </div>
            <div class="manage_prop_item_content">
              <span
                class="img_box"
                :style="`background-image:url(${detail.effectPic})`"
              ></span>
            </div>
          </div>
        </div>
        <div v-else class="manage_message_prop">
          <div class="manage_message_prop_item">
            <div class="manage_prop_item_title">
              后台展示图
            </div>
            <div class="manage_prop_item_content">
              <span
                class="img_box"
                :style="`background-image:url(${detail.showEffectPic})`"
              ></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="manage_message_content_row">
      <div class="manage_message_content_label">
        价格
      </div>
      <div class="manage_message_content_body">{{ detail.needScore }}积分</div>
    </div>
    <div class="manage_message_content_row">
      <div class="manage_message_content_label">
        有效期
      </div>
      <div class="manage_message_content_body">
        {{ detail.duration === -1 ? "长期有效" : `${detail.duration}日` }}
      </div>
    </div>
    <div class="manage_message_content_row">
      <div class="manage_message_content_label">
        优惠方式
      </div>
      <div class="manage_message_content_body">
        {{ !detail.price ? "无" : `首条${detail.price}积分` }}
      </div>
    </div>
    <div class="manage_message_content_row">
      <div class="manage_message_content_label">
        是否显示挂件
      </div>
      <div class="manage_message_content_body">
        {{ detail.showRule === 0 ? "否" : "显示限时兑换" }}
      </div>
    </div>
    <div class="manage_message_content_row">
      <div class="manage_message_content_label">
        展示时间
      </div>
      <div class="manage_message_content_body">
        {{ detail.showTime }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ManageMessageContent",
  props: {
    detail: {
      type: Object,
      default: {}
    }
  },
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  beforeDestroy() {},
  methods: {}
};
</script>

<style lang="scss" scoped>
.manage_message_content {
  .manage_message_content_row {
    display: flex;
    margin-bottom: 16px;
    font-size: 14px;
    &:last-child {
      margin-bottom: 0;
    }
    .manage_message_content_label {
      text-align: right;
      width: 118px;
      color: #0d0d0d;
      font-weight: 700;
      line-height: 22px;
    }
    .manage_message_content_body {
      margin-left: 16px;
      color: #404040;
      width: 850px;
      line-height: 22px;
    }
    .manage_message_prop {
      display: flex;
      .manage_message_prop_item {
        .img_box {
          display: inline-block;
          width: 320px;
          height: 60px;
          margin-top: 6px;
          border-radius: 4px;
          background-size: contain;
          background-repeat: no-repeat;
        }
        & + .manage_message_prop_item {
          margin-left: 16px;
          width: 320px;
        }
      }
    }
  }
}
</style>
